<template>
	<view class="allcontent">
    <view class="box-header">
      <view class="head-box">
        <shopro-navbar back-icon-color="#333" :background="{background:  'linear-gradient(139deg, #F8D7AB 5%, #DBB377 110%)'}">
          <view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
            <view style="color:#333333">多米会员</view>
          </view>
        </shopro-navbar>
      </view>
      <view class="head-userInfo">
      </view>
    </view>
		<view class="black-vip-box">
      <view class="dm-vip">
        <image src="https://duomi.bigchun.com/imgs/Group6402x.png" mode="widthFix"></image>
      </view>
			<view class="b-vip-select">
				<view class="label-item" @click="$Router.push({ path: '/pages/user/vip/me-vip' })">
					<view class="b-label-img"><image src="https://duomi.bigchun.com/imgs/vip-icon-1.png"></image></view>
					<view class="b-label-name">我的会员</view>
				</view>
				<view class="label-item" @click="$Router.push({ path: '/pages/user/vip/dm-card' })">
					<view class="b-label-img"><image src="https://duomi.bigchun.com/imgs/vip-icon-2.png"></image></view>
					<view class="b-label-name">靓米卡</view>
				</view>
				<view class="label-item" @click="$Router.push({ path: '/pages/user/vip/me-integral' })">
					<view class="b-label-img"><image src="https://duomi.bigchun.com/imgs/vip-icon-3.png"></image></view>
					<view class="b-label-name">我的积分</view>
				</view>
				<view class="label-item" @click="$Router.push({ path: '/pages/user/share-page' })">
					<view class="b-label-img"><image src="https://duomi.bigchun.com/imgs/vip-icon-4.png"></image></view>
					<view class="b-label-name">赚取积分</view>
				</view>
			</view>
		</view>

		<view class="qy-sm-box">
			<view class="qy-title">权益说明</view>
			<view class="qy-content">
        <u-parse :html="textContent"></u-parse>
			</view>
		</view>
    <!-- 积分商城 -->
    <view class="score-shop-box">
      <view class="score-title">
        <view class="imgcontent">
          <image src="https://duomi.bigchun.com/imgs/scoreshop.png" mode="aspectFill" class="imgs"></image>
        </view>
        <view class="titlecontent">
          <view class="toptitle">积分商城</view>
          <view class="bottomtitle">立即兑换更多超值好物</view>
        </view>
      </view>
      <view class="duihuanbtn" @click="goscore()">立即兑换</view>
    </view>
		<!-- 积分商城 -->
<!--		<view class="score-shop-box">-->
<!--			<view class="score-title">积分商城</view>-->
<!--			<view class="shop-list">-->
<!--				<view class="item-shop-label" v-for="(item,index) in scoreList" :key="index" @click="$Router.push({ path: '/pages/user/vip/vip-exchangeDetail', query: { id: item.id, type: 'score' } })">-->
<!--					<view class="shop-img"><image :src="item.image"></image></view>-->
<!--					<view class="shop-content">-->
<!--						<view class="shop-label-name">{{ item.title }}</view>-->
<!--						<view class="shop-label-money">{{ item.price }}</view>-->
<!--						<view class="shop-btn" @click.stop="exchange(item)">立即兑换</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textContent: '',
				scoreList: [],
				currentPage: 1,
				lastPage: 1
			}
		},
		onLoad() {
			this.initTextInfo()

			this.getScoreShopsList();
			// 触底监听
			uni.$on('uOnReachBottom', () => {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getScoreShopsList();
				}
			});
		},
		methods: {
			initTextInfo() {
				this.$https('vip.getXieInfo', {
					type: 1,
				}).then(res => {
					if (res.code) {
						this.textContent = res.data
					}
				})
			},

			//积分商品列表
			getScoreShopsList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('goods.scoreList', {
					page: that.currentPage
				}).then(res => {
					if (res.code == 1) {
						that.scoreList = [...that.scoreList, ...res.data.data];
						that.lastPage = res.data.last_page;
					}
				});
			},

			// 兑换商品
			exchange(item) {
				let user = uni.getStorageSync('userInfo');
				let { score } = item.score_goods_sku_price[0]
				if (user.score < score) return uni.showToast({title: '抱歉，积分不够兑换', icon: 'none'})
				this.$Router.push({ path: '/pages/user/vip/vip-exchangeDetail', query: { id: item.id, type: 'score' } })
			},
      goscore(){
        this.$Router.push({ path: '/pages/user/vip/vip-shop' })
      }
		}
	}
</script>

<style scoped lang="scss">
.allcontent{
  background: #2A2A2A;
  min-height: 100vh;
}
.black-vip-box {
	width: 702rpx;
	margin: -28rpx auto 30rpx;
  background-image: url('https://duomi.bigchun.com/imgs/Group6403x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 20rpx;
		.dm-vip {
      width: 100%;
      display: flex;
      margin-left: 8rpx;
      justify-content: center;
			image {
        width:95%;
			}
		}

	.b-vip-select {
		width: 100%;
		display: flex;
		align-items: flex-end;
    justify-content: space-between;
		padding: 40rpx 25rpx 30rpx;
		box-sizing: border-box;
		.label-item {
			display: flex;
			align-items: center;
			flex-direction: column;
			flex: 1;
			.b-label-img {
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.b-label-name {
				font-size: 24rpx;
				color: #F8D7AB;
				font-weight: 500;
			}
		}
	}
}

.qy-sm-box {
	width: 702rpx;
	margin: 0 auto;
  background: linear-gradient(90deg, #F0D8A5 0%, #DDB06C 100%);
  border-radius: 8px 8px 8px 8px;
  padding: 24rpx 0;
	.qy-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 30rpx;
    padding: 0 20rpx;
	}
	.qy-content {
    width: 94%;
    min-height: 372rpx;
    background-color: white;
    border-radius: 16rpx;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
	}
}
.score-shop-box {
  background: url('https://duomi.bigchun.com/imgs/scorebg.png') no-repeat;
  background-size: 100%;
  margin: 30rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 20rpx;
  .score-title{
    display: flex;
    align-items: center;
    height: 160rpx;
    .imgcontent{
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      margin-right: 14rpx;
      .imgs{
        width: 100%;
        height: 100%;
      }
    }
    .titlecontent{
      .toptitle{
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .bottomtitle{
        font-size: 28rpx;
        margin-top: 8rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
  .duihuanbtn{
    background: #424242;
    border-radius: 44px 44px 44px 44px;
    opacity: 1;
    color:#E2BB7B ;
    padding: 10rpx 20rpx;
  }


}
.box-header {
  background: url(https://duomi.bigchun.com/imgs/Unionbg.png) no-repeat;
  background-size: 100% 100%;
  height: 220rpx;
  display: flex;
}
</style>
